<!--
 * @Author: your name
 * @Date: 2021-07-12 10:05:13
 * @LastEditTime: 2021-11-05 14:41:28
 * @LastEditors: Please set LastEditors
 * @Description: Create a common dialog
 * @FilePath: \jinfeng_up\src\components\commonDialog\commonDialog.vue
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible_"
      :width="width"
      @close="close"
      :close-on-click-modal="false"
      :top="top"
    >
      <slot name="body"></slot>
      <div slot="footer" class="dialog-footer">
        <slot name="dialog_footer"></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {
        title: {
            type: String,
            default: 'hello world'
        },
        width: {
            type: String,
            default: '50%'
        },
        top: {
            type: String,
            default: '3vh'
        },
        height: {
            type: String,
            default: '50%'
        },
        dialogVisible: {
            type: Boolean
        }
    },
    data() {
        return {}
    },
    computed: {
        dialogVisible_: {
            get() {
                return this.dialogVisible
            },
            set(val) {
                // grants_改变由父组件控制
                this.$emit('on-change-dialogVisible', val)
            }
        }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        close() {
            this.$emit('search')
        }
    }
}
</script>

<style scoped lang="less">
::v-deep .el-dialog {
  // height: 850px;
  box-sizing: border-box;
  border-radius: 5px;
}

/*滚动条样式*/
::v-deep .el-dialog__body::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  height: 32px;
}
::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  width: 4px;
  height: 10px;
  background: #abaeb4;
  border-radius: 2px;
}
::v-deep .el-dialog__body::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 0;
  background: transparent;
}

::v-deep .el-dialog__headerbtn {
  background: url(../../assets/image/icon/Close_button.png) no-repeat center;
  background-size: cover;
  // font-size: 20px;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
  // height: 690px;
  overflow: auto;
}

::v-deep .el-dialog__header {
  //     padding: 20px 20px 10px;
  width: 100%;
  // position: fixed;
  background-color: #fff;
  z-index: 222;
  box-sizing: border-box;
  border-bottom: 1px solid #cad0d8;
  border-radius: 5px 5px 0 0;
}

::v-deep .el-dialog__footer {
  padding: 10px 20px 20px 20px;
}

hr {
  margin-top: 20px;
}
</style>
